<template>
    <div class="jianzhan-content">
        <Crumb name="配件上传"></Crumb>
        <div class="content">
            <el-button type="primary"
                       size="small"
                       class="input"
                       icon="el-icon-plus"
                       @click="openAdd"
                      >添加配件</el-button>
            <el-button type="primary"
                       size="small"
                       class="input"
                       icon="el-icon-download"
                       @click="downLoadTemplate"
                      >下载模板</el-button>
            <!--<div class="total" style="float: right;margin-right: 30px;">总金额: {{total}}</div>-->
            <el-input v-model="key"
                      placeholder="Contract No"
                      prefix-icon="el-icon-search"
                      size="small"
                      style="margin: 10px 0;width: 300px;"></el-input>
            <el-button type="primary"
                       size="small"
                       class="input"
                       icon="el-icon-download"
                       @click="downloadAll">批量下载</el-button>
            <div class="table-wrapper">
                <el-table
                        :data="consignmentList.filter(item=>item.contractNumber.includes(key))"
                        border
                        stripe
                        row-key="id"
                        @expand-change="getPartDetail"
                        empty-text="暂无数据/NO Data"
                        style="width: 100%">

                    <el-table-column
                            type="expand"
                    >
                        <template slot-scope="scope">
                            <el-input v-model="partsNumber" placeholder="Parts No/Part Name" prefix-icon="el-icon-search" size="small" style="margin: 10px 0;width: 300px;"></el-input>
                            <el-table
                                    :data="scope.row.partList.filter(item => {
                                        return item.partsNumber.toLowerCase().includes(partsNumber.toLowerCase()) ||
                                           item.description.includes(partsNumber)
                                    })"
                                    stripe
                                    border
                                    height="500px"
                                    style="width:95%">
                                <el-table-column
                                        label="发运"
                                        type="expand"
                                >
                                    <template slot-scope="s">
                                        <el-table
                                                :data="s.row.shipList"
                                                style="width: 100%">
                                            <el-table-column
                                                    prop="shipName"
                                                    label="船名"
                                                    width="180">
                                            </el-table-column>
                                            <el-table-column
                                                    prop="number"
                                                    label="发运数量"
                                                    width="180">
                                            </el-table-column>
                                        </el-table>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        prop="partsNumber"
                                        label="配件编号/Part No"
                                >
                                </el-table-column>
                                <el-table-column
                                        prop="description"
                                        label="中文"
                                        width="180">
                                </el-table-column>

                                <el-table-column
                                        prop="partsQuantity"
                                        label="数量/QTY">
                                </el-table-column>
                                <el-table-column
                                        prop="unit"
                                        label="单位/Unit">
                                </el-table-column>
                                <el-table-column
                                        prop="partsPrice"
                                        label="单价/Price">
                                </el-table-column>

                                <el-table-column
                                        prop="model"
                                        label="车型">
                                </el-table-column>

                            </el-table>
                        </template>
                    </el-table-column>
                    <el-table-column
                            type="index"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="contractNumber"
                            label="合同号/Contract No"
                            >
                    </el-table-column>
                    <el-table-column
                            sortable
                            prop="contractDateStr"
                            label="日期/Date"
                            width="180">
                    </el-table-column>

                    <el-table-column >
                        <!--<template slot="header" slot-scope="scope">-->
                            <!--<el-input v-model="key" class="my-input"  placeholder="查询合同号"  size="small" prefix-icon="el-icon-search"></el-input>-->
                        <!--</template>-->
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="openEdit(scope.row)" icon="el-icon-edit">Edit</el-button>
                            <el-button type="text" size="small" @click="download(scope.row)" icon="el-icon-download">Download</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <el-dialog
                title="配件"
                :visible.sync="dialogVisible"
                width="80%"
        >
            <el-form ref="form" :model="consignment" :rules="rule" label-width="150px" inline style="text-align: left">
                <el-form-item label="合同号/Contract No" prop="contractNumber">
                    <el-input v-model="consignment.contractNumber" placeholder="Contract Number" size="small" ></el-input>
                </el-form-item>
                <el-form-item label="日期/Date" prop="contractDateStr">
                    <el-date-picker value-format="yyyy-MM-dd" size="small" v-model="consignment.contractDateStr" placeholder="Please select date"></el-date-picker>
                </el-form-item>
                <div style="margin-bottom: 20px">
                    <label for="file" class="label-btn">上传文件/Upload File</label>
                    <input type="file" @change="fileChange" id="file" v-show="false" ref="file">
                </div>
                <div class="table">
                    <el-table
                            :data="partList"
                            stripe
                            border
                            row-key="partsNumber"
                            height="500px"
                            style="width:95%">
                        <el-table-column
                                label="发运"
                               type="expand"
                        >
                            <template slot-scope="scope">
                                <el-table
                                        :data="scope.row.shipList"
                                        style="width: 100%">
                                    <el-table-column
                                            prop="shipName"
                                            label="船名"
                                            width="180">
                                    </el-table-column>
                                    <el-table-column
                                            prop="number"
                                            label="发运数量"
                                            width="180">
                                    </el-table-column>
                                </el-table>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="partsNumber"
                                label="配件编号/Part No"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="description"
                                label="中文"
                                width="180">
                        </el-table-column>

                        <el-table-column
                                prop="partsQuantity"
                                label="数量/QTY">
                        </el-table-column>
                        <el-table-column
                                prop="unit"
                                label="单位/Unit">
                        </el-table-column>
                        <el-table-column
                                prop="partsPrice"
                                label="单价/Price">
                        </el-table-column>

                        <el-table-column
                                prop="model"
                                label="车型">
                        </el-table-column>
                        <el-table-column
                                prop="orderNumber"
                                label="订单号">
                        </el-table-column>

                    </el-table>
                </div>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">Cancel</el-button>
            <el-button type="primary" @click="submitForm" >Confirm</el-button>
          </span>
        </el-dialog>
        <el-dialog
                title="批量下载"
                :visible.sync="dialogVisible1"
                width="50%"
                >
            <el-form ref="form" :model="form" label-width="120px">
                <el-form-item :label="$t('startTime')">
                    <el-date-picker
                            v-model="startTime"
                            value-format="yyyy-MM-dd"
                            type="date" >
                    </el-date-picker>
                </el-form-item>
                <el-form-item :label="$t('endTime')">
                    <el-date-picker
                            v-model="endTime"
                            value-format="yyyy-MM-dd"
                            type="date" >
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible1 = false">{{$t('cancel')}}</el-button>
            <el-button type="primary" @click="sub">{{$t('download')}}</el-button>
          </span>
        </el-dialog>
    </div>
</template>

<script>
    import Crumb from '../../components/common/crumb'
    import {showExtraPartList,addExtraPart,updateExtraPart,partExcelFile,getContractDetail,getExtraDetail} from "../../api/contract";
    import {ERROR_OK} from "../../util/config";
    import {partList} from "../../store/getters";
    import authMixins from "../../util/authMixins"
    import {baseURL} from "../../util";

    export default {
        name: "consignment",
        mixins:[authMixins],
        data(){
            return {
                startTime:'',
                endTime:'',
                consignmentList:[],
                partsNumber:'',
                unDeliveryList:[],
                dialogVisible:false,
                dialogVisible1:false,
                consignment:{
                    id:'',
                    contractNumber:'',
                    fileUrl:'',
                    contractDateStr:'',
                },
                key:'',
                total:0,
                partList:[]
            }
        },
        created(){
            this.showExtraPartList()
        },
        methods:{
            downloadTemplate(){
                window.open('http://cdn.ayotrust.com/upload/2020-04-08/554/SBQX20190409-10_-11.xlsx')
            },
            //打开下载全部
            downloadAll(){
                this.dialogVisible1 = true
            },
           // 下载全部
            sub(){
                window.open(baseURL+`/features_for_heli/manage/export_excel_for_heli_detail.file?startTime=${this.startTime}&endTime=${this.endTime}`)
            },
            download(row){
                window.open(row.fileUrl)
            },
            async getPartDetail(row){
                this.partsNumber = '';
                const target = this.consignmentList.find(item => {
                    return item.id === row.id
                });
                if (target) {
                    if(target.partList) {
                        return
                    }
                    const {status,data} = await getExtraDetail(row.id);
                    if (status === ERROR_OK) {
                        const partList = data.featuresForHeliDetailList;
                        this.$set(target,'partList',partList);
                    }



                }
            },
            async fileChange(e){
                const formData = new FormData();
                Array.prototype.forEach.call(e.target.files, item=>{
                    formData.append('exFiles',item);
                });
                const {status,data} = await partExcelFile(formData);
                if (status === 0 ) {
                    this.partList = data.data;
                    this.consignment.fileUrl = data.file_path[0];
                }
                this.$nextTick(()=>{
                    this.$refs.file.value = '';
                })
            },
            openAdd(){
                this.dialogVisible = true;
                this.clear()
            },
            clear(){
                this.consignment = {
                    id:'',
                    contractNumber:'',
                    fileUrl:'',
                    contractDateStr:'',
                };
                this.partList = [];
            },
            async openEdit(row) {
                const {status,data} = await getExtraDetail(row.id);
                if (status === ERROR_OK) {
                    this.partList = data.featuresForHeliDetailList;
                }
                this.consignment = row;
                this.dialogVisible = true
            },
            submitForm(){
                this.$refs.form.validate(async valid=>{
                    if (valid) {
                        const {contractNumber,contractDateStr,fileUrl,id} = this.consignment;
                        if(!partList.length){
                            this.$notify.error('合同必须有配件信息');
                            return
                        }
                        const list = [...this.partList];
                        list.forEach(item => {
                            item.heliShipInformation = item.shipList ? JSON.stringify(item.shipList) : '[]';
                            delete item.shipList;
                        })
                        // this.partList.forEach(item=>{
                        //     item.heliShipInformation = item.shipList ? item.shipList.map(ship => ship.shipName).join(',') : '';
                        //     item.orderNumber = item.shipList ? item.shipList.map(ship => ship.number).join(',') : '';
                        // });
                        let featuresForHeliDetails = JSON.stringify([...list]);
                        if(id){
                            const {status,msg} = await updateExtraPart({contractNumber,contractDateStr,featuresForHeliDetails,id,fileUrl});
                            if(status === 0 ) {
                                this.$notify.success('修改成功');
                                this.clear();
                                this.dialogVisible = false
                            } else {
                                this.$notify.error(msg)
                            }
                        } else {
                            const {status,msg} = await addExtraPart({contractNumber,contractDateStr,featuresForHeliDetails,fileUrl});
                            if(status === ERROR_OK) {
                                this.$notify.success('增加成功');
                                this.clear();
                                this.dialogVisible = false;
                                this.showExtraPartList()
                            } else {
                                this.$notify.error(msg)
                            }
                        }

                    }
                })
            },
            async showExtraPartList(){
                const {status,data,msg} = await showExtraPartList();
                if (status === ERROR_OK) {
                    this.consignmentList = data?data:[];
                    this.total = msg
                } else {
                    this.consignmentList = [];
                    this.$notify.warning('没有数据')
                }
            }
        },
        components:{
            Crumb
        }
    }
</script>

<style scoped lang="scss">
    @import "../../css/mixins";
    .content{
        @include content
    }
    .label-btn{
        cursor: pointer;
        height: 30px;
        line-height: 30px;
        text-align: center;
        color: white;
        background-color: #409eff;
        border-radius: 3px;
        padding: 5px 15px;
        display: block;
        width: 120px;
    }
    .warning{
        color: #fff;
        font-weight: bold;
        background-color: #c60023;
    }
</style>